provide-inject 机制

本节目标：理解“provide-inject 机制”的核心思路，并能把它用于实际开发或面试表达。 Vue 的 provide 和 inject 功能主要用于开发者在不层层传递 props 的情况下，在组件之间实现数据传递。这两个函数创建了一个从提供数据的祖先组件到使用数据的后代组件的依赖关系。

它主要应用于开发者想要在任意深度的后代组件中使用祖先组件的数据，而不必通过 props 逐层传递。 在 Vue 3 中，你可以在 setup() 函数中使用 provide 和 inject。这里有一个简单的例子： <!-- 祖先组件 --> <template> <div> <ChildComponent /> </div> </template> <script setup> import { ref, provide } from 'vue' import ChildComponent from './ChildComponent.vue' const data = ref('Hello from parent') provide('myData', data) </script>

在上面的祖先组件中，我们使用 provide 函数来提供一个名为 myData 的数据。 然后在任意深度的子组件中，我们可以使用 inject 函数来接收这个数据： <!-- 后代组件 --> <template> <div> {{ myData }} </div> </template> <script setup> import { inject } from 'vue' const myData = inject('myData') </script> 在上面的后代组件中，我们使用 inject 函数来接收祖先组件提供的 myData 数据。

注意：provide 和 inject 主要解决的是跨多层级组件间的数据传递问题，但是这种机制可能会使得组件之间的关系变得复杂，难以追踪数据的来源和流向，因此在使用时要尽量谨慎。